<template>
	<div id="">
		<div :class="[ 'ov' , opKey ? 'on':'']" @click="OpClose"></div>

		<div class="pop key" :class="[ 'pop key' , opKey ? 'on':'']">
			<div class="tit">{{$t('page.Withdrawal')}}</div>
			<div class="input">
				<!-- <span class="iconfont icon-mima f-c-lan"></span> -->
				<input name="key" type="number" v-model="t_int" :placeholder="$t('page.input_del_tis')"
					@input="T_int" />
			</div>

			<p class="tis">{{$t('page.S_num')}}: {{s_num}}USDT</p>

			<!-- <div class="radio">
					<div :class="['rad' , Btype == 'usdt' ? 'btn-c-lan':'on']">
						<input type="radio" value="usdt" v-model="Btype">
						USDT
					</div>
					<div :class="['rad' , Btype == 'eth' ? 'btn-c-lan':'on']">
						<input type="radio" value="eth" v-model="Btype">
						ETH
					</div>
				</div> -->

			<div class="f-btn">
				<div class="btn-border">
					<div class="sub" @click="OpClose">{{$t('page.Cancel')}}</div>
				</div>
				<div class="btn-border">
					<div class="sub on" @click="FormKey()">{{$t('page.Revise')}}</div>
				</div>
			</div>
		</div>

	</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import {mapState} from "vuex";
	export default {
		name: "Withdrawal",
		data() {
			return {
				userData:[],
				opKey: false,
				t_int: '',
				Btype: 'usdt',
				adderss: "",
				btn_click: true,
				s_num: 0
			}
		},
		mounted() {
			this.address = this.$dapp.getAddress();
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		watch: {
			'user': function(e) {
				this.userData = e
			}
		},
		methods: {
			T_int(e) {
				// 手续费的计算是30USDT +  提现金额x2%
				console.log(this.t_int);
				var s_num = 0

				if (this.t_int == 0) {
					s_num = 0
				} else {
					s_num = 30 + this.t_int * 0.02
				}

				console.log(s_num)
				this.s_num = s_num.toFixed(2)

			},
			show(e) {
				this.opKey = true;
			},
			OpClose() {
				this.opKey = false;
				this.btn_click = true
				
				this.$emit('gddocu')
				Toast.clear();
			},
			async FormKey() {
				Toast.loading({
					duration:0
				})
				
				var moyu = Number(this.s_num) + Number(this.t_int)
				console.log(this.userData , moyu)
				
				if (!this.$dapp.getAddress()) {
					Toast.fail(this.$t('tis.addressNo'))
					console.log("没有地址")
					return;
				} else if (this.t_int == '' || this.t_int <= 0) {
					Toast.fail(this.$t('tis.numNo'))
					console.log("填写错误")
					return false;
				} else if ( moyu > this.userData.balance) {
					Toast.fail(this.$t('tis.yueNo'))
					console.log("账上余额不足！")
					return false;
				} else {
					this.withdraw()
				}

			},

			async withdraw() {
				// 签名消息体，可以自定义，建议添加上timestamp，然后在后端对timestamp进行过期判定，防止用户签名被劫持盗用，
				const msgText = JSON.stringify({
					timestamp: parseInt(Date.now() / 1000),
					type: 'withdraw'
				})
				// 得到签名
				const sign = await this.$dapp.signMessage(msgText).catch(err => {
					this.OpClose()
				});
				console.log("提现")
				
				if(!sign ){
					console.log("无签名")
					return false;
				}
				
				if (!this.btn_click) {
					Toast.fail(this.$t('tis.duyoci'))
					console.log('请不要多次提交!')
					return false;
				}
				this.btn_click = false; //防止多次提交

				const { err, res } = await this.$request.post("/chss/withdraw/withdraw", {
					address: this.$dapp.getAddress(), //地址
					currency: this.Btype, //币种
					amount: this.t_int //数量
				});
				console.log(res)
				if (err == null) {
					Toast.success(this.$t('tis.txSuccess'))
					console.log("提现成功")
					setTimeout(() => {
						this.OpClose();
						
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ov {
		position: fixed;
		z-index: -5;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;

		transition: all 1s;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;

		&.on {
			z-index: 98;
			opacity: 0.5;
		}
	}

	.tis {
		text-align: left;
	}

	.pop {
		position: fixed;
		text-align: center;
		top: 50%;
		left: 50%;
		z-index: -1;
		opacity: 0;
		border-radius: 10px;
		overflow: hidden;


		transform: translate(-50%, -50%) scale(2, 2);
		-webkit-transform: translate(-50%, -50%) scale(2, 2);
		-moz-transform: translate(-50%, -50%) scale(2, 2);
		-ms-transform: translate(-50%, -50%) scale(2, 2);
		-o-transform: translate(-50%, -50%) scale(2, 2);


		transition: all 1s;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;

		&.on {
			opacity: 1;
			z-index: 99;
			transform: translate(-50%, -50%) scale(1);
			-webkit-transform: translate(-50%, -50%) scale(1);
			-moz-transform: translate(-50%, -50%) scale(1);
		}
	}

	.key {
		padding: 30px;
		text-align: center;
		background: #20283d;

		.tit {
			font-size: 30px;
			color: #aaa;
		}

		.input {
			height: 90px;
			line-height: 90px;
			width: 600px;
			border-radius: 50px;
			border: 2px solid #2c395d;
			display: flex;
			margin: 40px 0px;

			.keyteo {
				color: #496296;
				font-size: 30px;
			}

			input {
				padding: 0px 30px;
				flex: 1;
				background: transparent;
				border: none;
				font-size: 28px;
				height: 100%;
				text-align: left;
			}

			.iconfont {
				height: 50px;
				line-height: 50px;
				margin: 20px 20px;
				font-size: 50px;
			}

		}

		.f-btn {
			display: flex;
			justify-content: space-between;
			padding: 20px 0px;

			.btn-border {
				width: 45%;
				padding: 2px;
				border-radius: 35px;
				background: -moz-linear-gradient(#59e4f2, #1d65cd);
				background: -webkit-linear-gradient(#59e4f2, #1d65cd);
				background: -o-linear-gradient(#59e4f2, #1d65cd);
				background: -ms-linear-gradient(#59e4f2, #1d65cd);
				background: linear-gradient(#59e4f2, #1d65cd);
			}

			.sub {
				font-size: 25px;
				height: 60px;
				line-height: 60px;
				border-radius: 35px;
				background: #2c395d;
				color: #FFF;

				&.on {
					background: -moz-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: -webkit-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: -o-linear-gradient(to top right #1368f8, #5ef2ff);
					background: -ms-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: linear-gradient(to top right, #1368f8, #5ef2ff);
					color: #333;
				}
			}
		}

	}

	.radio {
		text-align: center;
		margin: 50px 0px;

		.rad {
			height: 60px;
			line-height: 60px;
			position: relative;
			z-index: 1;
			border-radius: 10px;
			width: 200px;
			margin: 0px 30px;
			display: inline-block;

			input {
				position: absolute;
				margin: 0px;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 2;
			}

			&.on {
				border: 2px solid #07ACCA;
			}
		}
	}
</style>
